<template>
  <view style="padding: 20rpx 30rpx;">
    <view class="title">完善您的看剧喜好，相关短剧会优先推荐给您~</view>
    <view class="nav">频道</view>
    <view class="sex">
      <view class="sex-item" @click="sex = 1" :style="sex === 1 ? 'background: linear-gradient(to bottom, rgb(214, 222, 255), rgba(255, 255, 255, 0))' : 'background-color:#ffffff;'">
        <u-icon name="man" color="#4263FF" size="50"></u-icon>
        <view class="sex-item-text">男</view>
      </view>
      <view class="sex-item" @click="sex = 0" :style="sex === 0 ? 'background: linear-gradient(to bottom, rgb(255, 214, 241), rgba(255, 255, 255, 0))' : 'background-color:#ffffff;'">
        <u-icon name="woman" color="#E81F4B" size="50"></u-icon>
        <view class="sex-item-text">女</view>
      </view>
    </view>
    <view class="nav">分类</view>
    <view class="classList">
      <view class="class" v-for="(item,index) in list" @click="change(item)" :style="item.active ? 'background-color: #E81F4B;color: #ffffff;' : 'background-color: #ffffff;'">{{item.title}}</view>
    </view>

    <view class="btn" @click="submit">保存</view>
  </view>
</template>
<script>
import {Api} from "../../service/api";
import {mapActions, mapMutations} from 'vuex'

export default {
  name: "like",
  data() {
    return {
      userInfo: {},
      sex: null,
      list:[],
      activeList: []
    }
  },
  async onShow() {
    this.userInfo = await this.getInfoMethod()
    this.sex = this.userInfo.sex
    let likes = this.userInfo.likes
    Api.classifyListSimple().then(res=>{
      this.list = res.data.map(item=>{
        if(!likes) item.active = false
        else item.active = likes.includes(item.id);
        return item
      })
    })
  },
  methods:{
    ...mapActions('userInfo', ['getInfoMethod']),
    ...mapMutations('userInfo', ['setInfoMethod']),
    change(item){
      item.active = !item.active
    },
    async submit() {
      let arr = this.list.filter(obj => obj.active === true) // 筛选出active为true的对象
      if(arr.length < 3){
        uni.showToast({
          title: "请至少选择3个分类",
          icon: 'none'
        })
        return
      }
      let classList = arr.map(obj => {
        return {
          id: obj.id,
          title: obj.title
        };
      })
      uni.setStorageSync('classList', classList)
      const likes = arr.map(obj => obj.id).join(','); // 将id数组转换成逗号分隔的字符串
      await Api.updateUserInfo({
        likes: likes,
        sex: this.sex
      })
      const {data} = await Api.refreshToken(this.userInfo.refreshToken)
      this.setInfoMethod(data)
      uni.showToast({
        title: "保存成功"
      })
      setTimeout(()=>{
        uni.reLaunch({
          url: '/pages/benefit/index'
        })
      },1200)
    }
  }
}
</script>

<style>
page{
  background-color: #F7F7F7;
}
</style>
<style scoped lang="scss">

.title{
  text-align: center;
  margin: 30rpx 0 15rpx;
  color: #686767;
  font-size: 24rpx;
}

.nav{
  margin-bottom: 15rpx;
  font-size: 34rpx;
  font-weight: 500;
}

.sex{
  display: flex;
  justify-content: space-between;

  .sex-item{
    width: 44%;
    height: 150rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rpx;

    .sex-item-text{
      font-weight: 500;
      font-size: 34rpx;
    }
  }
}

.classList{
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
  margin-bottom: 120rpx;
  
  .class{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 80rpx;
    background-color: #fff;
    border-radius: 20rpx;
    font-size: 28rpx;
  }

  .active{
    background-color: #4263FF;
  }
}

.btn{
  width: 85%;
  height: 80rpx;
  margin: 0 auto 60rpx;
  border-radius: 60rpx;
  background-color: #E81F4B;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
</style>
